<template>
  <div class="container">
    <div class="search_wrap">
      <el-form label-position="right" label-width="100px">
        <el-row>
          <el-col :span="5">
              <el-form-item label="账号：" prop="userId">
                  <el-input v-model="search.account" />
              </el-form-item>
          </el-col>
          <el-col :span="5">
              <el-form-item label="会员类型：" prop="">
                  <el-select v-model="search.type" placeholder="请选择">
                      <el-option label="个人" :value="0"/>
                      <el-option label="企业" :value="1"/>
                  </el-select>
              </el-form-item>
          </el-col>

          <el-col :span="4">
              <el-form-item label="昵称：" prop="">
                <el-input v-model="search.nickname" />
              </el-form-item>
          </el-col>

          <el-col :span="9">
            <el-form-item label="时间：" prop="">
              <el-date-picker
                v-model="search.startTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                class="startDate"
                type="datetime"
                placeholder="选择开始日期"/>
                <span> 至 </span>
              <el-date-picker
                v-model="search.endTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                class="endDate"
                type="datetime"
                placeholder="选择结束日期"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="5">
              <el-form-item label="状态：" prop="">
                  <el-select v-model="search.state" placeholder="请选择">
                      <el-option label="启用" :value="0"/>
                      <el-option label="停用" :value="1"/>
                  </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="5">
              <el-form-item label="总余额：" prop="">
                <el-input v-model="search.balance" />
              </el-form-item>
          </el-col>
          <el-col :span="7">
              <el-form-item label="" prop="">
              </el-form-item>
          </el-col>
          <el-col align="right" :span="6">
              <el-button type="primary" @click="toSearch">搜索</el-button>
              <el-button @click="resetSearch">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
      <!-- <div class="add_box">
          <p>企业会员</p>
          <el-button type="primary" size="big" @click="add(0)">添加</el-button>
      </div> -->

      <div class="tabel_wrap">
        <el-table
            v-loading="listLoading"
            class="table"
            :data="list"
            element-loading-text="Loading"
            :row-class-name="getRowClassName"
            border
            fit
            highlight-current-row
            >
            <el-table-column align="center" label="账号" width="">
                <template slot-scope="scope">
                {{ scope.row.account }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="会员类型" width="">
                <template slot-scope="scope">
                    {{ scope.row.type | typeFilter }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="昵称" width="">
                <template slot-scope="scope">
                    {{ scope.row.nickname }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="有效期" width="">
                <template slot-scope="scope">
                  {{ scope.row.expire_time }}
                <!-- {{ scope.row.vipId | formatvipId }} -->
                    <!-- <span v-if="scope.row.startTime">{{ scope.row.startTime }}</span> - <span v-if="scope.row.endTime">{{ scope.row.endTime }}</span> -->
                </template>
            </el-table-column>
            <el-table-column align="center" label="状态" width="">
                <template slot-scope="scope">
                  {{ scope.row.state | statusFilter }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="联系方式" width="">
                <template slot-scope="scope">
                    {{ scope.row.tel }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="邮箱" width="">
                <template slot-scope="scope">
                    {{ scope.row.email }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="总余额" width="">
                <template slot-scope="scope">
                    {{ scope.row.balance }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="300">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="primary"
                        @click="see(scope.row.id)">查看</el-button>
                    <el-button
                        size="mini"
                        :type="scope.row.state===1?'success':'danger'"
                        @click="handleChangeState(scope.row.state, scope.row.id)">
                          <span v-if="scope.row.state===1">启用</span>
                          <span v-else>停用</span>
                      </el-button>
                    <el-button
                        size="mini"
                        type="primary"
                        @click="handelResetPassword(scope.$index, scope.row)">重置密码</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <memberManagePopUp
      :title-num="dialogTitleNum"
      :user-data="userData"
      :dialog-visible.sync="dialogVisible"
      @sendData="adduser"
     />
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageIndex" :limit.sync="listQuery.pageSize" @pagination="fetchData" />
    <!-- <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageIndex" :limit.sync="listQuery.pageSize" /> -->
    </div>
  </div>
</template>

<script>

import { getUserInfo, resetPassWord, changeState, checkUserInfo, addUser } from '@/api/user'
import Pagination from '@/components/Pagination'
import memberManagePopUp from '@/components/memberManage/memberManagePopUp.vue'
// import locale from 'element-ui/lib/locale/lang/zh-CN'
export default {
  components: { Pagination, memberManagePopUp },
  filters: {
    statusFilter(state) {
      const statusMap = {
        0: '启用',
        1: '停用'
      }
      return statusMap[state]
    },
    typeFilter(type) {
      const statusMap = {
        0: '个人',
        1: '企业'
      }
      return statusMap[type]
    }
  },
  data() {
    return {
      search: {
        account: '',
        startTime: '',
        endTime: '',
        type: '',
        state: '',
        nickname: '',
        balance: ''
      },
      total: 0,
      listQuery: {
        pageIndex: 0,
        pageSize: 10
      },
      listLoading: false,
      list: [],
      dialogTitleNum: 0,
      dialogVisible: false,
      userData: {}
    }
  },
  mounted() {
    this.getInfo()
  },
  methods: {
    resetSearch() {
      this.search.account = ''
      this.search.startTime = ''
      this.search.endTime = ''
      this.search.type = ''
      this.search.state = ''
      this.search.nickname = ''
      this.search.balance = ''
    },
    searchFn() {
      console.log(this.search)
    },
    getRowClassName({ rowIndex }) {
      // 判断奇偶行
      return rowIndex % 2 === 0 ? 'even-row' : 'odd-row'
    },
    add() {
      this.dialogVisible = true
      this.dialogTitleNum = 0
    },
    adduser(obj) {
      addUser(obj).then(res => {
        console.log(res)
      })
    },
    see(id) {
      checkUserInfo({ id }).then(res => {
        console.log('查看id为', id, '的用户:::', res)
        if (res.status === 200) {
          this.userData = res.data
          this.dialogVisible = true
          this.dialogTitleNum = 1
        }
      })
    },
    edit() {

    },
    del(data) {
      this.$confirm('确认要删除用户' + data.account + '？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log('删除执行')
      }).catch(() => {
      })
    },
    handelResetPassword(index, data) {
      this.$confirm('确认要重置' + data.account + '的密码？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        resetPassWord({ id: data.id }).then(res => {
          if (res.status === 200) {
            this.$confirm('重置密码成功，重置后的密码为： gm@123456$', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'success'
            }).then(() => {

            })
          } else {
            this.$message({
              type: 'error',
              message: '重置密码失败'
            })
          }
        })
      }).catch(() => {
      })
    },
    getInfo() {
      getUserInfo(this.listQuery).then(response => {
        console.log(response)
        if (response.status === 200) {
          this.list = response.data
          this.total = response.total
        }
      })
    },
    toSearch() {
      const newData = this.objectCon(this.listQuery, this.search)
      this.listLoading = true
      getUserInfo(newData).then(response => {
        console.log(response)
        this.list = response.data
        this.total = response.total
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    fetchData() {
      const newData = this.objectCon(this.listQuery, this.search)
      this.listLoading = true
      getUserInfo(newData).then(response => {
        console.log(response)
        this.list = response.data
        this.total = response.total
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    handleChangeState(state, id) {
      // state- 0:正常  1:禁用
      let newState = 0
      newState = state ? 0 : 1
      console.log('newState:', newState)
      const newData = {
        id,
        state: newState
      }
      changeState(newData).then(res => {
        if (res.status === 200) {
          this.fetchData()
        }
      })
    }
  }
}
</script>

<style scoped>
.container {
    padding: 0 20px;
    box-sizing: border-box;
}
.search_wrap {
    width: 100%;
    padding: 20px 0;
    background-color: #FFF;
}
.add_box {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.startDate,.endDate{
  width: 210px;
}

.tabel_wrap {
  border-top: 1px solid #DDD;
}

.switch_text_left {
  margin-left:10px
}
.switch_text_right {
  margin-right:10px
}
</style>
